import { Navigate, useRoutes } from "react-router-dom";
import { lazy,Suspense } from "react";
import Loading from "../components/Loding";

const Login =lazy(()=>import("../pages/Login"))
const Main =lazy(()=>import("../pages/Main"))
const Bbq =lazy(()=>import('../components/404'))
const Home =lazy(()=>import("../pages/Main/Home"))
const About =lazy(()=>import("../pages/Main/About"))
const List =lazy(()=>import("../components/List"))
// import Login from "../pages/Login";
// import Main from "../pages/Main";
// import Bbq from '../components/404';
// import Home from "../pages/Main/Home";
// import About from "../pages/Main/About";
// import List from "../components/List";

const load=(Comp)=>{
    return (
        <Suspense fallback={<Loading/>}>
            <Comp />
        </Suspense>
    )
}

const routers=[
    {
        path:'/login',
        element:load(Login)
    },
    {
        path:'/main',
        element:load(Main),
        children:[
            {
                path:'/main/home',
                element:load(Home),
                children:[
                   {
                    path:'/main/home/music/:id',
                    element:load(List)
                   },
                   {
                    path:'/main/home/news/:id',
                    element:load(List)
                   },
                ]
            },
            {
                path:'/main/about',
                element:load(About)
            },
        ]
    },
    {
        path:'/',
        element:<Navigate to='/login'/>
    },
    {
        path:'*',
        element:load(Bbq)
    },
]
export default routers;

export const GetRoutes=()=>{
    return useRoutes(routers)
}

export const useMyRoutes=()=>{
   return useRoutes(routers)
}


